﻿@page "/logouts"
@inject IStringLocalizer<Logouts> Localizer

<h3>@Localizer["H1"]</h3>

<h4>@Localizer["P1"]</h4>

<DemoBlock Title="@Localizer["P2"]" Introduction="@Localizer["P3"]" Name="Normal">
    <Logout ImageUrl="_content/BootstrapBlazor.Shared/images/Argo.png" DisplayName="Administrators" UserName="Admin" class="bg-secondary" />
    <div style="height: 80px;"></div>
</DemoBlock>

<DemoBlock Title="@Localizer["P4"]" Introduction="@Localizer["P5"]" Name="ShowUserName">
    <Logout ImageUrl="_content/BootstrapBlazor.Shared/images/Argo.png" DisplayName="Administrators" UserName="Admin" ShowUserName="false" class="bg-secondary" />
    <div style="height: 80px;"></div>
</DemoBlock>

<DemoBlock Title="@Localizer["P6"]" Introduction="@Localizer["P7"]" Name="ChildContent">
    <Logout ImageUrl="_content/BootstrapBlazor.Shared/images/Argo.png" DisplayName="Administrators" UserName="Admin">
        <i class="fa-fw fa-solid fa-user"></i>
        <span>@Localizer["P8"]</span>
    </Logout>
    <div style="height: 80px;"></div>
</DemoBlock>

<DemoBlock Title="@Localizer["P9"]" Introduction="@Localizer["P10"]" Name="HeaderTemplate">
    <Logout ImageUrl="_content/BootstrapBlazor.Shared/images/Argo.png" DisplayName="Administrators" UserName="Admin" class="bg-warning">
        <HeaderTemplate>
            <div class="d-flex flex-fill align-items-center">
                <img alt="avatar" src="_content/BootstrapBlazor.Shared/images/Argo-C.png" style="border-radius: 50%;">
                <div class="flex-fill">
                    <div class="logout-dn">@Localizer["P11"]</div>
                    <div class="logout-un">@Localizer["P12"]</div>
                </div>
            </div>
        </HeaderTemplate>
    </Logout>
    <div style="height: 80px;"></div>
</DemoBlock>

<DemoBlock Title="@Localizer["P13"]" Introduction="@Localizer["P14"]" Name="LinkTemplate">
    <Logout ImageUrl="_content/BootstrapBlazor.Shared/images/Argo.png" DisplayName="Administrators" UserName="Admin" class="bg-primary">
        <LinkTemplate>
            <a href="#">
                <i class="fa-solid fa-user"></i><span>@Localizer["P15"]</span>
            </a>
            <a href="#">
                <i class="fa-solid fa-gear"></i><span>@Localizer["P16"]</span>
            </a>
            <LogoutLink />
        </LinkTemplate>
    </Logout>
    <div style="height: 220px;"></div>
</DemoBlock>

<AttributeTable Items="GetAttributes()"></AttributeTable>
